<template>
  <div class="main">
    <div class="news-card" v-show='!loading'>
      <div class='cover'
        :style='{ backgroundImage: "url(" + getWxImg(meterialInfo.thumbUrl) + ")" }'
        @click="onJump(meterialInfo.newsId)">
        <div class='title'>{{meterialInfo.title}}</div>
      </div>
      <div class="news-content">
        <div class='sub-news'
          v-for='(subNews, subIndex) of meterialInfo.newsList'
          :key='"subNews" + subIndex'
          @click="onJump(subNews.newsId)">
          <span class='sub-news-title'>{{subNews.title}}</span>
          <span class='sub-news-img' :style='{ backgroundImage: `url("${getWxImg(subNews.thumbUrl)}")` }'></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      newsId: '',
      meterialInfo: {}
    }
  },
  methods: {
    fetchNewsGroup () {
      this.loading = true
      this.$_load.show()
      let url = `${this.SERVICE_PORTAL}/${sessionStorage.getItem('appid')}/media/news/${this.newsId}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.meterialInfo = res.data
            document.title = this.meterialInfo.title
            this.$_load.hide()
            this.loading = false
            this.setCropToolMenuAndShare({
              shareInfo: {
                title: this.meterialInfo.title,
                imgUrl: this.meterialInfo.thumbUrl
              }
            })
          } else {
            this.$_load.hide()
            this.$toast('该图文已删除')
          }
        } else {
          this.$_load.hide()
        }
      })
    },
    // 跳转
    onJump (newsId) {
      this.$router.push({
        name: 'materialDetail',
        params: { newsId: newsId },
        query: { sessionId: sessionStorage.getItem('sessionId') }
      })
    }
  },
  created () {
    this.newsId = this.$route.params.newsId
    this.fetchNewsGroup()
  }
}
</script>
<style lang="stylus" scoped>
.main
  max-width 750px
  min-height 100vh
  background #fff
  padded_box(border-box, 15px)
  margin 0 auto
  .news-card
    width 100%
    .cover
      position relative
      // height 108px
      height 154px
      background-color #DDDDDD
      background-repeat no-repeat
      background-position center
      background-size cover
      .title
        position absolute
        left 0
        right 0
        bottom 0
        background: rgba(0, 0, 0, 0.2);
        line-height 1.5
        font-size 16px
        color #fff
        padding 6px
        ellipsis(2)
        word-break break-all
    .news-content
      border 1px solid #ddd
      border-top none
      .sub-news
        position relative
        height 60px
        background #fff
        display flex
        align-items center
        padding-right 6px
        border-bottom 1px solid #ddd
        &:last-child
          border-bottom none
        &:hover
          .sub-news-mask
            display block
        .sub-news-title
          flex 1
          font-size 14px
          color #22242F
          padding 0 10px
          line-height 1.4
          ellipsis(2)
          word-break break-all
        .sub-news-img
          flex none
          width 32px
          height 32px
          background-color: #D8D8D8;
          background-position center
          background-repeat no-repeat
          background-size cover
        .sub-news-mask
          display none
          position absolute
          left 0
          right 0
          top 0
          bottom 0
          z-index 10
          cursor pointer
          background rgba(0,0,0,0.5)
          .sub-news-text
            position absolute
            left 50%
            top 50%
            transform translate(-50%, -50%)
            font-size 14px
            color #fff
</style>
